import React, { Component } from 'react';
import moment from 'moment'
import { connect } from 'react-redux'
import { Modal, Form, Input,Select ,DatePicker,message,TimePicker,Radio,Button,Row, Col,TreeSelect,Table,InputNumber} from 'antd';

const TreeNode = TreeSelect.TreeNode;
const FormItem = Form.Item;
const RadioGroup = Radio.Group;
const Option =Select.Option;


class SpaceModal extends Component {
  constructor(props) {
    super(props);
    this.state = {
      visible: false,
    };
  }

  okHandler = () => {
     const { onOk,cycletime } = this.props;
     this.props.form.validateFields((err, values) => {
      if (!err) {
        var list = [];
        cycletime.inventoryTimes.map(d=>{
          var dr = {
            ...d,
          };
          if(dr.startTime){
            dr.startTime = new moment(dr.startTime).format("HH:mm");
            list.push(dr);
          }
        })
        if(list!=null&&list.length>0){
            values = {
              ...values,
              cycleType:cycletime.cycleType,
              inventoryTimes: list,
            }
            onOk(values);
        }else{
            message.error('请选择盘点时间');
        }
      }
     });
  };

  render() {
    const columns = [{
      title: '机房',
      dataIndex: 'roomName',
      key: 'roomName',
      width: 120,
    },{
      title: '机柜',
      dataIndex: 'assetName',
      key: 'assetName',
      width: 120,
    },{
      title: '位置',
      dataIndex: 'start',
      key: 'start',
      width: 100,
      render: (value, row, index) => {
          return (
              row.start+"~"+row.end
          )
      }
    },{
      title: '连续数',
      dataIndex: 'nums',
      key: 'nums',
      width: 100,
    }];
    const { dispatch,visible,roomList,maskClosable,confirmLoading,wrapClassName,modalCurrent,modalCurrentSize,modalTotal,modalList,modalLoading,onCancel} = this.props;
    const { getFieldDecorator,getFieldsValue,resetFields} = this.props.form;
    const formItemLayout = {
      labelCol: { span: 6 },
      wrapperCol: { span: 16 },
    };

    const getDay = data => data.map((item) => {
      return <Option key={item+''}>{item}日</Option>
     })
     const cycletimeChange = function(e){
       dispatch({
         type: "inventory/upState",
         payload: {
           cycletime: {
            inventoryTimes: [],
             cycleType: e.target.value,
           }
         }
       })
     }
     const addIns = () => {
       cycletime.inventoryTimes.push({})
       dispatch({
         type: "inventory/upState",
         payload: {
           cycletime: cycletime,
         }
       })
     }
     const delIns = (ind) => {
       cycletime.inventoryTimes.splice(ind,1);
       dispatch({
         type: "inventory/upState",
         payload: {
           cycletime: cycletime,
         }
       })
     }
     const changeIns = (value,ind,name) => {
       //console.log(value)
       // console.log(name)
       cycletime.inventoryTimes[ind][name] = value;
       dispatch({
         type: "inventory/upState",
         payload: {
           cycletime: cycletime,
         }
       })
     }

    const getRoom = data => data.map((item) => {
     return <Option key={item.id_+''}>{item.name}</Option>
    })
    const getUser = data => data.map((item) => {
     return <Option key={item.id_+''}>{item.name}</Option>
    })

    const treeData = (i) => {
      return i.map( d => {
        d.label = d.name;
        d.key = d.id+'';
        d.value = d.id+'';
        d.children = d.rackList && d.rackList.length > 0 ? treeData(d.rackList) : [];
        return d;
      })
    }
    const pagination = {
      current:modalCurrent,
      pageSize:modalCurrentSize,
      total: modalTotal,
      showSizeChanger: true,
      showTotal: (total => '共' + modalTotal + '条'),
      onShowSizeChange(current, size) {
        dispatch({
          type: 'space/queryPreset',
          payload: { ...getFieldsValue(),...{'pageNum':current, 'pageSize':size} },
        });
      },
      onChange(current) {
        dispatch({
          type: 'space/queryPreset',
          payload: { ...getFieldsValue(),...{'pageNum':current, 'pageSize':modalCurrentSize} },
        });
      },
    };
    let roomsList = [];
    for (let i = 0; i < roomList.length; i++) {
      roomsList.push(<Option key={roomList[i].id_}>{roomList[i].name}</Option>);
    }
function submitHandle(){
  dispatch({
    type: 'space/qryById',
    payload: { ...getFieldsValue() },
  });
}
function cancelHandel(){
  resetFields();
  onCancel();
}
    return (
      <span>
            <Modal
                    maskClosable= {this.props.maskClosable}
                    confirmLoading= {this.props.confirmLoading}
                    title='U位推荐'
                    width={880}
                    visible={this.props.visible}
                    onOk={this.okHandler}
                    onCancel={this.props.onCancel}
                    key={this.props.newKey}
                    footer={[
                     <Button  key="close" type="primary" size="large" onClick={cancelHandel}>关闭</Button>
                   ]}
            >
            <Form layout='horizontal' onSubmit={this.okHandler}>
              <Row>
                <Col span={10}>
                  <FormItem   {...formItemLayout}
                      label="机房"
                      hasFeedback>
                    {
                    getFieldDecorator('roomId')(
                     <Select
                        showSearch
                        style={{ width: 200 }}
                        placeholder="选择机房"
                        optionFilterProp="children">
                        <Option value="">全部</Option>
                          {roomsList}
                        </Select>
                      )
                   }
                </FormItem>
                </Col>
                <Col span={10}>
                      <FormItem   {...formItemLayout}
                          label="U高"
                          hasFeedback>
                        {
                          getFieldDecorator('uHeight')(
                            <InputNumber min={1} max={999}/>
                          )
                       }
                      </FormItem>
                      </Col>
                      <Col span={4}>
                      <FormItem>
                        <Button type="primary" size='large' onClick={submitHandle} className='ant-search-btn'>查询</Button>
                      </FormItem>
                      </Col>
                    </Row>
                    </Form>
                <div style={{width:'100%',padding:"30px 20px",}}>
                    <Table columns={columns} rowKey={record => record.rackId+"_"+record.start+"_"+record.end}
                    loading={modalLoading} dataSource={modalList} pagination={false} scroll={{ y: 400 }}
                    />
                </div>
        </Modal>
      </span>
    );
  }

}

export default Form.create()(SpaceModal)
